<script lang="ts" setup>
import dayjs from "dayjs";

const props = defineProps<{
  payPrice: number;
  timeout: number;
  expired: boolean;
}>();

const emit = defineEmits<{
  // 过期
  (e: "update:expired", value: boolean): void;
}>();

// 剩余秒数
const remainSec = ref(props.timeout);
const timeStr = computed(() => dayjs(remainSec.value * 1000).format("mm:ss"));

// 定时器
const interval = setInterval(() => {
  remainSec.value--;
  if (remainSec.value <= 0) {
    clearInterval(interval);
    emit("update:expired", true);
  }
}, 1000);
onUnmounted(() => clearInterval(interval));
</script>

<template>
  <div class="flex flex-col items-center mb-3">
    <span class="py-4 text-3xl c-gray-7">￥{{ payPrice / 100 }}</span>
    <span class="text-sm">剩余支付时间</span>
    <span class="text-base c-blue-5" :class="{ 'c-red-5': !remainSec }">{{
      remainSec ? timeStr : "已过期"
    }}</span>
  </div>
</template>
